<template>
  <div class="about-page">
    <top-header>
      <div slot="nav-left">
        <img style="height: 44px;" src="../../assets/img/logo1.png" alt="易信">
      </div>
      <div slot="nav-right">
        <ul class="nav">
          <li index="0" @click="handleToPage('login')">首页</li>
          <li index="1" @click="handleToPage('about')">联系我们</li>
          <li index="3" @click="handleToPage('help')">在线求助</li>
        </ul>
      </div>
    </top-header>

      <section class="sec-help">
        <div class="titles">
          <el-autocomplete
              v-model="state"
              :fetch-suggestions="querySearchAsync"
              placeholder="请输入问题关键字,找到答案"
              @select="handleSelect"
              class="searchInput"
              :trigger-on-focus="false"
              @keyup.enter.native="searchEnterFun(1)"
              size='large'
            >
            <el-button slot="append" @click="searchEnterFun(1)" class="search_button" size="large">搜索</el-button>
            </el-autocomplete>
        </div>
      </section>
      <div class="container">
      <section class="main-container">
        <el-row :gutter="20">
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <aside class="aside-box">
                <!-- <div class="menu-item__box" v-for="item in menus" :key="item.id">
                  <div class="menu-item__title" @click="handleToggelMenu(item.id)">
                    <i class="el-icon-arrow-right"></i>
                    <span class="menu-txt">{{item.name}}</span>
                  </div>
                  <div
                    class="menu-item__dropdown"
                    v-if="item.children"
                    v-show="item.id === activeId"
                  >
                    <ul class="nav-box">
                      <li
                        class="nav-box__item"
                        v-for="child in item.children"
                        :key="child.id"
                        @click="handleContent(child)"
                      >
                        <span class="menu-txt">{{child.name}}</span>
                      </li>
                    </ul>
                  </div>
                </div> -->
                <p class="conten-index">
                  <span @click="active=false,activeTitle='内容索引',searchFlag=false">内容索引</span>
                </p>
                <el-tree :data="menus" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
              </aside>
            </div>
          </el-col>
          <el-col :span="18">
            <div class="grid-content bg-purple">
              <!-- <div class="main-content">
                                v-show="subActiveId === item.id"
                v-for="item in contents"
                :key="item.id"
                -->
                <h3 class="title">{{activeTitle}}</h3>
              <div
                class="main-content"
                v-html="activeContent" v-if="active">
              </div>
              <div v-else-if="searchFlag">
                <el-card class="box-card" v-for="item in data" :key="item.id" style="width:100%">
                    <div slot="header" class="clearfix">
                      <span>{{item.name}}</span>
                    </div>
                    <div v-for="children in item.children" :key="children.id"  class="text item">
                      <div>
                        <span class="search_title" @click="handleNodeClick(children)">
                           {{children.name}}
                        </span>
                        <p v-show="searchFlag" style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;width:200px;font-size:15px;">
                             {{children.content | removeHtml}}
                           </p>
                        <div class="search_time" v-show="searchFlag">发表于 * {{ children.createtime }} • 更新于 {{showtime(children.updateTime)}}</div>
                      </div>
                    </div>
                    <el-pagination
                            @current-change="handleCurrentChange"
                            :current-page="searchDataRes.currPage"
                            :page-size="5"
                            layout="total, prev, pager, next"
                            :total="searchDataRes.totalCount">
                    </el-pagination>
                </el-card>
              </div>
              <div v-else>
                <el-card class="box-card" v-for="item in menus" :key="item.id">
                    <div slot="header" class="clearfix">
                      <span>{{item.name}}</span>
                    </div>
                    <div v-for="children in item.children" :key="children.id"  class="text item" @click="handleNodeClick(children)">
                           {{children.name}}
                    </div>
                </el-card>
              </div>
              <div class="help-rec" v-show="active">
                以上内容是否对您有帮助？ <el-button size="small" @click="add()" :disabled="tips">是({{useful}})</el-button> <el-button size="small" @click="add1()" :disabled="tips">否({{useless}})</el-button>
                <div class="pt10" v-show="tips">
                  <i class="el-icon-success"></i>  提交成功，感谢您的反馈！
                </div>
              </div>
              <!-- </div> -->
            </div>
          </el-col>
        </el-row>
      </section>
      <div class="bottom-session__body">
        <div class="flex-box__item">
          <div class="hd">微信小程序</div>
          <div class="bd">
            <img style="height: 144px;" src="../../assets/img/hello.png">
          </div>
          <div class="ft">
            <p>搜索“易信小程序”或</p>
            <p>扫描的二维码</p>
          </div>
          <!-- <div class="ft">
                                    <div class="ft-flex__box">
                                        <el-button type="primary">安卓下载</el-button>
                                        <el-button type="info">ios下载</el-button>
                                    </div>
          </div>-->
        </div>
        <div class="flex-box__item">
          <div class="hd">微信公众平台</div>
          <div class="bd">
            <img style="height: 144px;" src="../../assets/img/hello.png">
          </div>
          <div class="ft">
            <p>搜索“易信公众号”或</p>
            <p>扫描的二维码</p>
          </div>
        </div>
        <div class="flex-box__item">
          <div class="hd color-bg__blue">服务热线：{{sysData.companyPhone}}</div>
          <div class="flex-box__server">
            <div class="item">
              <p>商家名称</p>
              <a type="primary">{{sysData.companyName}}</a>
            </div>
            <div class="item">
              <p>联系地址</p>
              <a type="primary">{{sysData.companyAddress}}</a>
            </div>
            <div class="item">
              <p>传真</p>
              <a type="primary">{{sysData.companyPhone}}</a>
            </div>
            <div class="item">
              <p>商服邮箱</p>
              <a type="primary">{{sysData.companyEmail}}</a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <Footer></Footer>
  </div>
</template>
<script>
import { treeDataTranslate } from "@/utils";
import Footer from "./footer";

export default {
  data() {
    return {
      data:[],
      active:false,//判断是否菜单是否又被选中
      activeId: 0,  //被选中的菜单id
      subActiveId: "",
      menus: [],
      contents: [],
      sysData: {},
      activeContent:"",
      activeTitle:"", //被选中菜单名
      tips:false, //反馈信息显示标识
      restaurants: [],  //搜索提示结果集
      state: '',  //搜索状态
      searchData:[],//查找的所有帮助菜单
      searchDataRes:{},//查找结果集分页对象
      key:"", //搜索关键字
      searchFlag:false,  //搜索标识
      timeout:null,

      defaultProps: {  //菜单默认参数名
          children: 'children',
          label: 'name'
        }
    };
  },
  components: {
    Footer
  },
  created() {
    this.getDataList();
    this.getSysData();
  },
  filters:{
    filterHtml:{
      read:function(val) { //val就是以获取的msg的值
        return val.replace(/<[^>]*>/g);//去除文字的<...></...>标签
      },
      write:function() {
        return val;
      }
    },
    removeHtml:function(val) {
      return val && val.replace(/<(?:.|\n)*?>/gm, '')
        .replace(/(&rdquo;)/g, '\"')
        .replace(/&ldquo;/g, '\"')
        .replace(/&mdash;/g, '-')
        .replace(/&nbsp;/g, '')
        .replace(/&gt;/g, '>')
        .replace(/&lt;/g, '<')
        .replace(/<[\w\s"':=\/]*/, '');
    }
  },
  methods: {
    getDataList() {
      this.$http({
        url: this.$http.adornUrl("/hotel/hotelhelepmenu/helpMenus"),
        method: "get"
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.searchData = data.data;
          this.loadAll();
          let menu = treeDataTranslate(data.data, "id", "pid");
          this.data = menu;
          this.menus = menu;
          // console.log(this.data)
          // menu.map(item => {
          //   this.menus.push({
          //     name: item.name,
          //     id: item.id,
          //     children: item.children.map(child => {
          //       return {
          //         name: child.name,
          //         id: item.id + "-" + child.id
          //       };
          //     })
          //   });
          // });
          // menu.map(item => {
          //   item.children.map(child => {
          //     this.contents.push({
          //       id: item.id + "-" + child.id,
          //       content: child.content
          //     });
          //   });
          // });
          // this.activeId = menu[0].id;
          // this.subActiveId = this.contents[0].id;
        } else {
          this.$message.error(data.msg);
        }
      });
    },
    handleToPage(name) {
      this.$router.push({ name });
    },
    handleToggelMenu(id) {
      if (this.activeId === id) {
        this.activeId = "";
        return;
      }
      this.activeId = id;
    },
    handleContent(item) {
      const { id } = item;
      if (this.subActiveId === id) {
        return;
      }
      // 在这里做切换显示隐藏或者发起网络请求获取对应接口数据
      this.handleShowCOntent(id);
    },

    handleShowCOntent(id) {
      this.subActiveId = id;
      // or request
    },
    getSysData() {
      this.$http({
        url: this.$http.adornUrl("/hotel/hotelsystem/info"),
        method: "get"
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.sysData = data.hotelSystem;
        } else {
          this.$message.error(data.msg);
        }
      });
    },
handleNodeClick(data) {  //点击菜单显示内容
        // if(!data.children){   //如果没有子元素才显示内容
          this.activeContent = data.content;
          this.activeTitle = data.name;
          this.activeId = data.id;  //设置选中ID
          this.useful = data.useful;
          this.useless = data.useless;
          this.active = true;
          this.tips = false;
        // }
      },
      add() {  //根据activeId  有用+1
        this.$http({
          url: this.$http.adornUrl(
            `/hotel/hotelhelepmenu/helpUseful/${this.activeId}`
            ),
          method: "GET"
        }).then(({ data }) => {
            if (data && data.code === 0) {
              this.tips = true;
              this.useful = data.hotelHelepMenu.useful;
                this.useless = data.hotelHelepMenu.useless;
                this.getDataList();
            }
        })
      },
      add1() { //根据activeId  无用+1
        this.$http({
          url: this.$http.adornUrl(
            `/hotel/hotelhelepmenu/helpUseless/${this.activeId}`
            ),
          method: "GET"
        }).then(({ data }) => {
            if (data && data.code === 0) {
              this.useful = data.hotelHelepMenu.useful;
                this.useless = data.hotelHelepMenu.useless;
              this.tips = true;
               this.getDataList();
            }
        })
      },
      loadAll() {  //将菜单数组对象改变成搜索返回数组对象
        var arr = [];
        for (let i = 0; i < this.searchData.length; i++) {
          var temp = {};
          temp['value'] = this.searchData[i]['name'];
          temp['id'] = this.searchData[i]['id'];
          arr.push(temp);
        }
        this.restaurants = arr;
      },
      async querySearchAsync(queryString, cb) {  //关键字改变时向服务器查询结果
        // var restaurants = this.restaurants;
        // var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;
        var results;
        this.key = queryString;
        if (queryString != "") {
              await this.$http({
              url: this.$http.adornUrl(
                `/hotel/hotelhelepmenu/helpSearchRes/${queryString}`
                ),
              method: "GET"

            }).then(({ data }) => {
                if (data && data.code === 0) {
                  console.log(data.data)
                  this.searchData = data.data;
                  this.loadAll();
                }
            });

            results = this.restaurants;
            cb(results);  //将结果返回给input提示
        } else {
          this.$message.error("请输入关键字");
        }
      },
      // createStateFilter(queryString) {
      //   return (state) => {
      //     return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
      //   };
      // },
      handleSelect(item) {    //搜索提示点击赋值
        this.key = item.value;
        this.searchEnterFun(1);
      },
      async searchEnterFun(pagenum) {  //监听enter按钮搜索事件
        var temp = {};
        await this.$http({
              url: this.$http.adornUrl(
                `/hotel/hotelhelepmenu/helpSearchRes/${this.key}`
                ),
              method: "GET"

            }).then(({ data }) => {
                if (data && data.code === 0) {
                  this.searchDataRes = data.data;
                  temp['children'] = this.searchDataRes;
                  temp['name'] = "搜索到 " + this.searchDataRes.length + " 条 " + this.key + " 的结果：";
                }
            });

        var arr = [];
        arr.push(temp);
        this.data = arr;
        this.active = false;
        this.activeTitle = "搜索结果"
        this.searchFlag = true;
      },
      showtime(time) {  //将时间转化成几天或者几小时前
      let date =
        typeof time === "number"
          ? new Date(time)
          : new Date((time || "").replace(/-/g, "/"));
      let diff = (new Date().getTime() - date.getTime()) / 1000;
      let dayDiff = Math.floor(diff / 86400);
      let monDiff = Math.floor(diff / (86400 * 30));
      let isValidDate =
        Object.prototype.toString.call(date) === "[object Date]" &&
        !isNaN(date.getTime());

      if (!isValidDate) {
        window.console.error("不是有效日期格式");
      }
      const formatDate = function(date) {
        let today = new Date(date);
        let year = today.getFullYear();
        let month = ("0" + (today.getMonth() + 1)).slice(-2);
        let day = ("0" + today.getDate()).slice(-2);
        let hour = today.getHours();
        let minute = today.getMinutes();
        let second = today.getSeconds();
        return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
      };

      if (isNaN(dayDiff) || dayDiff < 0 || dayDiff >= 31) {
        return formatDate(date);
      }
      return (
        (dayDiff === 0 &&
          ((diff < 60 && "刚刚") ||
            (diff < 120 && "1分钟前") ||
            (diff < 3600 && Math.floor(diff / 60) + "分钟前") ||
            (diff < 7200 && "1小时前") ||
            (diff < 86400 && Math.floor(diff / 3600) + "小时前"))) ||
        (dayDiff === 1 && "昨天") ||
        (dayDiff < 7 && dayDiff + "天前") ||
        (dayDiff < 31 && Math.ceil(dayDiff / 7) + "周前")

      );
    },
    handleCurrentChange: function(currentPage) {  //页数改变时调用
        this.currentPage = currentPage;
        this.searchEnterFun(this.currentPage);
    }
  }
};
</script>
<style lang="scss" scoped>
.container {
  width: 1200px;
  margin: 0 auto;
}
input{
  height: 50px;
}
.sec-help {
  overflow: hidden;
  width: 100%;
  height: 200px;
  background: url('../../assets/img/help_back.png') no-repeat;
  background-size: 100%;
  .titles {
    width: 100%;
    float: left;
    text-align: center;
    margin: 40px 0px 20px 0px;
    input{
      height: 20px;
      background-color: red;
    }
    h1 {
      font-size: 26px;
      color: #777;
      border-bottom: #ddd solid 2px;
      width: 400px;
      margin: 0 auto;
      padding-bottom: 10px;
      font-weight: lighter;
      position: relative;
      em {
        display: block;
        width: 120px;
        height: 4px;
        position: absolute;
        left: 140px;
        bottom: -3px;
        background: #00b0ed;
      }
    }
    h2 {
      font-size: 20px;
      width: 400px;
      margin: 0 auto;
      color: #999;
      font-weight: lighter;
      padding-top: 5px;
      font {
        color: #00b0ed;
      }
    }
  }
}
.bottom-session__body {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  padding: 20px 0;
  .flex-box__item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 20px;
    box-sizing: border-box;

    .bd {
      margin: 15px 0;
      border: 1px solid #eeeeee;
      padding: 8px;
    }

    &:not(:first-child) {
      border-left: 1px solid #eeeeee;
    }

    .ft {
      text-align: center;
    }

    .color-bg__blue {
      width: 85%;
      margin: 0 auto;
      margin-bottom: 15px;
      height: 40px;
      border-left: 1px solid #ddd;
      line-height: 40px;
      font-size: 20px;
      color: #fff;
      text-align: center;
      background-color: #efefef;
    }

    .flex-box__server {
      width: 85%;
      margin: 0 auto;
      display: flex;
      flex-wrap: wrap;

      .item {
        width: 50%;
      }
    }
  }
}
.main-container {
  width: 1200px;
  margin: 60px auto;

  .main-content {
    margin-left: 30px;
    min-height: 300px;
    border-radius: 20px;
    padding: 40px 20px;
  }

  .title{
    text-align: center;
    font-size: 20px;
  }

  .aside-box {
    background-color: #efefef;
    .menu-item__box {
      .menu-item__title {
        cursor: pointer;
        padding: 0 20px;
        color: #ffffff;
        height: 45px;
        line-height: 45px;
        border-bottom: 1px solid #ffffff;
      }
      .menu-txt {
        margin-left: 8px;
      }

      .nav-box {
        list-style: none;
        padding: 0;
        margin: 0;
        &__item {
          cursor: pointer;
          list-style: none;
          height: 40px;
          display: flex;
          align-items: center;
          padding: 0 25px;
          color: #ffffff;
          background-color: rgba(163, 163, 163, 1);
          transition: background-color ease-in 0.1s;

          &:not(:last-of-type) {
            border-bottom: 1px solid #ffffff;
          }
          &.active {
            background-color: rgba(188, 188, 188, 1);
          }
          &:hover {
            background-color: rgba(188, 188, 188, 1);
          }
        }
      }
    }
  }
}
.el-tree{
  background-color: #efefef;
  min-height: 368px;
  padding:20px 10px;
}

.el-tree-node{
  padding-top: 8px;
  padding-bottom: 8px;
  font-size: 16px;
}

.help-rec{
  background-color: #eeeeee;
  padding: 10px;
  text-align: center;
}
.pt10{
  padding-top: 10px;

  i{
    color:#67C23A;
  }
}

.conten-index{
  padding-top: 30px;
  padding-left: 33px;
  background-color: #efefef;
  cursor: pointer;
}

.item {
    margin-bottom: 18px;
    cursor: pointer;
  }

  .clearfix span{
    font-weight: bold;
    font-size: 16px;
  }
  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 30%;
    display: inline-grid;
    margin: 10px;
  }
  .searchInput{
    width: 50%;
    margin: 30px;
  }

  .search_title{
    color:#2180D2;
    font-size: 18px;
  }
  .search_time{
    color:#00ab4e;
    font-size: 12px;
  }
  .search_button{
    background-color: #21d376!important;
    font-size: 16px;
    color: #fff!important;
  }
  .el-input-group--append .el-input-group__append{
    border: none;
  }
  .header span{
    font-size: 18px;
  }
  .el-card.box-card {
    display: inline-block;
    vertical-align: top;
  }

</style>
